import React, { useState } from 'react'
import { Button, Input, Form, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'
import Icon from '@/components/Icons'

const LoginPage: React.FC = () => {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields()
      setLoading(true)
      // 这里添加实际登录逻辑
      setTimeout(() => {
        Toast.show({ content: '登录成功', icon: 'success' })
        navigate('/')
      }, 1000)
    } catch (error) {
      Toast.show({ content: '请正确填写登录信息', })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className={styles.loginPage}>
       <div className={styles.iconBox}>
       <Icon onClick={()=>{navigate(-1)}} size='180px' iconName='icon-xiaohongshushu' />
       </div>
      <div className={styles.loginBox}>
        <h2 className={styles.title}>欢迎登录</h2>
        <Form form={form} layout="horizontal">
          <Form.Item
            name="phone"
            label="手机号"
            rules={[
              { required: true, message: '手机号不能为空' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
            ]}
          >
            <Input placeholder="请输入手机号" clearable />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input placeholder="请输入密码" type="password" clearable />
          </Form.Item>

          <Button 
            block 
            color="danger" 
            onClick={handleSubmit}
            loading={loading}
            className={styles.loginBtn}
          >
            立即登录
          </Button>
          <Button 
            block 
            onClick={() => navigate('/register')}
            className={styles.loginBtn}
            style={{ color: '#9e9e9e' }}
          >
            注册
          </Button>
        </Form>
      </div>
    </div>
  )
}

export default LoginPage